Image Optimizer

Image Optimizer saves your images with the highest possible quality at the lowest possible file size, ensuring that your images won't exceed the byte budget for the Web.

  Enabling Image Optimizer


Enabling Image Optimizer

After creating images for your Web site, you'll want to save them in a Web-optimized format in order to reduce loading time.

To enable Image Optimizer:

1.	Click Web: Image Optimizer.

2.	Select from JPG, GIF, and PNG file formats with the buttons at the far right and adjust compression settings. The Preview window at the top right updates accordingly to display the compressed image.

3.	Click Compress By Size if you want to compress a JPEG image to a specific file size.

4.	Click Save As to save your image in the selected format.

  Saving an image as a GIF

  Saving an image as a JPEG

  Saving an image as a PNG


Saving an image as a GIF

To save an image as a GIF:

1.	Click Web: Image Optimizer to open the Image Optimizer interface.

2.	Click the GIF Image Optimizer button just below the Preview window on the right.

3.	On the Mask Options tab, select the Pick Color option to choose the colors that you want to be transparent. Hold the Ctrl key down as you click the image on the left. Your cursor becomes an eyedropper tool as soon as you drag it over your image.

4.	To select a particular region of colors based on their similarity to the pixel that you selected using the eyedropper, enter a Similarity value.

5.	If you want to create custom transparencies, select the Import Mask option and type the name of the file that you want to use as your mask.

6.	Select Enable background blending using background settings if you want the transparent areas in the GIF to match the background tile that you will use in your Web page. This makes your image blend in smoothly with the background of your Web page.

7.	From the Background tab, select a color or an image that you want to blend with your image.

8.	Click the Palette tab to view the color palette used for your image. From here, you can save this palette as a file for later use. Click the Save Palette button to open the Save Palette File dialog box. Palettes are saved with the *.PAL extension.

9.	Click the GIF Options tab. Select Interlaced if you want the image to load gradually into the browser window.

10.	Select a preset to use from the Preset list. You can also add your own preset or remove it from the list.

11.	Click the Modem speed menu button. This lets you select a connection speed, which is then used to calculate the download time for an optimized image.

12.	After you've entered the settings to optimize the GIF file, click the Save As button to save it.

  Saving an image as a JPEG

  Saving an image as a PNG


Saving an image as a JPEG

To save an image as a JPEG:

1.	Click Web: Image Optimizer to open the Image Optimizer interface.

2.	Click the JPEG Image Optimizer button just below the Preview window on the right.

3.	On the Mask Options tab, select the Pick color option to choose the colors that you want to be transparent. Hold the Ctrl key down as you click the image on the left. Your cursor becomes an eyedropper tool as soon as you drag it over your image.

4.	To select a particular region of colors based on their similarity to the pixel that you selected using the eyedropper, enter a Similarity value.

5.	Because the JPEG format does not natively support transparency, the transparent areas here are actually blended with the background specified in the Background tab. You can use this technique to blend the 'transparent' areas in with the background colors of your page or with another image.

6.	If you want to create custom transparencies, select Import Mask option and type the name of the file that you want to use as your mask.

7.	Set the Soft level for the image. This blurs the image slightly according to the selected value in order to facilitate compression as well as to compensate for any dithering previously applied to the image. A higher level selected means that the image will be blurrier.

8.	Select a Mode for the JPEG file that you want to create - Progressive, Standard, or Standard Optimized. Progressive creates an image that gradually fades in as it downloads. Standard creates an image that is compatible with all browsers, but generally have larger file sizes than file created in Progressive mode. Standard Optimized creates the smallest possible image file using a non-progressive compression technique.

9.	Select a Preset to use. You can add your own preset or remove it from the list.

10.	Adjust the level of compression by entering a value for Quality, or by dragging the Quality slider.

11.	Click the Modem speed menu button. This lets you select a connection speed, which is then used to calculate the download time for an optimized image.

12.	After you've entered the settings to optimize the JPEG file, click the Save As button to save it.

  Saving an image as a GIF

  Saving an image as a PNG


Saving an image as a PNG

To save an image as a PNG:

1.	Click Web: Image Optimizer to open the Image Optimizer interface.

2.	Click the PNG Image Optimizer button just below the Preview window on the right.

3.	On the Mask Options tab, select the Pick color option to choose the colors that you want to be transparent. Hold the Ctrl key down as you click the image on the left. Your cursor becomes an eyedropper tool as soon as you drag it over your image.

4.	To select a particular region of colors based on their similarity to the pixel you selected using the eyedropper, enter a Similarity value.

5.	If you want to create custom transparencies, select the Import Mask option and type the name of the file that you want to use as your mask.

6.	Set the Soft level for the image. This option blurs the image slightly according to the selected value in order to facilitate compression as well as to compensate for any dithering previously applied to the image. A higher level selected means that the image will be blurrier.

7.	Select a File type for the PNG file that you want to create - True Color, Indexed, or Grayscale. True Color PNG files contain millions of colors and are significantly larger than JPGs because PNG uses a lossless compression format, meaning that no data is lost while the file is being saved. Indexed files are 8-bit files similar to GIFs and contain a maximum of 256 colors in the image file, Grayscale files are 8-bit grayscale images that contain up to 256 distinct shades of gray.

8.	Select the Interlaced option if you want the image to gradually fade in as it downloads. This allows you to get a rough preview of the image before it has finished loading. However, interlaced files are larger than non-interlaced and may take a fraction longer to load.

9.	If you chose to create an Indexed PNG file, select the default palette type you want to use from the Palette option.

10.	Select the Alpha channel option if you chose the Import Mask from the Mask Options tab. This saves the mask as an actual alpha channel that can be used and modified later.

11.	Click the Modem speed menu button. This lets you select a connection speed, which is then used to calculate the download time for an optimized image.

12.	Click the Save As button to save your file as a PNG.

  Saving an image as a GIF

  Saving an image as a JPEG


JPEG Image Optimizer dialog box - Mask Options
  Mask Options	  Background	  JPEG Options

None Click if you don't want to apply a mask to your image.

Pick color Select to choose the range of colors in the image that you want to use as a mask.

Similarity Enter a value to select a particular region of colors based on their similarity to the pixel that you selected using the eyedropper.

Import mask Click if you want to use an image as your mask.

File name Enter the name of the file that you want to use as your mask.

Enable background blending using background settings Select this option to blend the mask more smoothly into the original image.

Invert transparent area Select to reverse the selection area, making the unselected portion your transparent area.

Save as Click to save your file.

Batch Select to open the Batch dialog box for trying out different compression settings on your file before you actually save it.

After Image Optimizer is done with batch processing, you can see the results of the tests in the Batch Results dialog box that appears.


JPEG Image Optimizer dialog box - Background
  Mask Options	  Background	  JPEG Options

Select a color to use as the default transparency place holder or the color for the transparent areas in your image.

White color Fills transparent areas with this color.

Black color Fills transparent areas with this color.

User selected color Fills transparent areas with a color of your choice. Click the color square to open the Ulead Color Picker and choose a color for the mask.. Right-click to open other color pickers.

User selected image Fills transparent areas with an image of your choice. Enter the name of the file or click Browse to search for the file.

Tile offset Enter a value to define the image's X- and Y-offset. This shifts the image a number of pixels based on the entered value. Negative values move the image left and down while positive values move the image right and up.


JPEG Image Optimizer dialog box - JPEG Options
  Mask Options	  Background	  JPEG Options

Preset Select a preset. The choices depend on the mode you select. Click Add to create a new preset or click Delete to remove a preset from the list.

Soft Select a level to determine the amount of blur that will be applied to your image. The higher the number, the smoother your image appears. This facilitates compression and compensates for any dithering you've previously applied to your image.

File type Select a file type to save your image as.

Mode Select the type of JPEG file you want to create.

Subsampling Select a subsampling method. Applying it to your image enhances the compression  by retaining all the information on brightness but approximates some of the less important color information.

Quality Select the quality you want for your image by entering a value or dragging the slider. The higher the quality, the larger the file size and the longer it will take to download  your image.

Compress By Size Opens the Compress By Size dialog box for reducing your file to a specific size.


GIF Image Optimizer dialog box - Mask Options
  Mask Options	  Background
  GIF Options	  Palette

None Click if you don't want to apply a mask to your image.

Pick color Select to choose the range of colors in the image that you want use as a mask.

Similarity Enter a value to select a particular range of colors based on their similarity to the pixel you selected using the eyedropper.

Import mask Click if you want to use an image as your mask.

File name Enter the name of the file that you want to use as your mask.

Enable background blending using background settings Select this option to blend the mask more smoothly into the original image.

Invert transparent area Select to reverse the selection area, making the unselected portion your transparent area.

Save as Click to save your file.

Batch Select to open the Batch dialog box for trying out different compression settings on your file before you actually save it.

After Image Optimizer is done with batch processing, you can see the results of the tests in the Batch Results dialog box that appears.


GIF Image Optimizer dialog box - Background
  Mask Options	  Background
  GIF Options	  Palette

Select a color to use as your mask.

White color Fills transparent areas with this color.

Black color Fills transparent areas with this color.

User selected color Fills transparent areas with a color of your choice. Click the color square to open the Ulead Color Picker and choose a color for the mask. Right-click to open other color pickers.

User selected image Enter the name of the file that you want to use as your background image. Click Browse to search for the file.

Tile offset Enter a value to define the image's X- and Y-offset. This shifts the image a number of pixels based on the entered value. Negative values move the image left and down while positive values move the image right and up.


GIF Image Optimizer dialog box - GIF Options
  Mask Options	  Background
  GIF Options	  Palette

Preset Select a preset. The choices depend on the mode you select. Click Add to create a new preset or click Delete to remove a preset from the list.

Soft Select a level to determine the amount of blur that will be applied to your image. The higher the number, the smoother your image appears. This facilitates compression and compensates for any dithering you've previously applied to your image.

File type Select a file type to save your image as.

Color Enter a value to set the maximum number of colors that your file contains.

Weight Specify the color channel that you want to emphasize. This prompts the program to favor colors from a certain color channel (Red, Green, or Blue) when building the color palette.

Palette Select the default palette type you want to use. Select "User defined" to apply a customized palette. Specify a user-defined palette file (*.PAL) in the File name field.

Dither Click to apply dithering to your image. This mixes existing colors from the palette in different patterns in order to mimic the missing color.

Interlaced Click if you want the image to load gradually into the Web browser.


GIF Image Optimizer dialog box - Palette
  Mask Options	  Background
  GIF Options	  Palette

Colors Displays all the colors in the selected palette.

Save palette Stores your palette file in *.PAL format for later use.


PNG Image Optimizer dialog box - Mask Options
  Mask Options	  Background
  PNG Options	  Palette

None Click if you don't want to apply a mask to your image.

Pick color Select to choose the range of colors in the image that you want use as a mask.

Similarity Enter a value to select a particular range of colors based on their similarity to the pixel you selected using the eyedropper.

Import mask Click if you want to use an image as your mask.

File name Enter the name of the file that you want to use as your mask.

Enable background blending using background settings Select this option to blend the mask more smoothly into the original image.

Invert transparent area Select to reverse the selection area, making the unselected portion your transparent area.

Save as Click to save your file.

Batch Select to open the Batch dialog box for trying out different compression settings on your file before you actually save it.

After Image Optimizer is done with batch processing, you can see the results of the tests in the Batch Results dialog box that appears.


PNG Image Optimizer dialog box - Background
  Mask Options	  Background
  PNG Options	  Palette

Select a color to use as your mask.

White color Fills transparent areas with this color.

Black color Fills transparent areas with this color.

User selected color Fills transparent areas with a color of your choice. Click the color square to open the Ulead Color Picker and change the color of your mask. Right-click to open other color pickers.

User selected image Enter the name of the file that you want to use as your background image. Click Browse to search for the file.

Tile offset Enter a value to define the image's X- and Y-offset. This shifts the image a number of pixels based on the entered value. Negative values move the image left and down while positive values move the image right and up.


PNG Image Optimizer dialog box - PNG Options
  Mask Options	  Background
  PNG Options	  Palette

Preset Select a preset. The choices depend on the mode you select. Click Add to create a new preset, or click Delete to remove a preset from the list.

Soft Select a level to determine the amount of blur that will be applied to your image. The higher the number, the smoother your image appears. This facilitates compression and compensates for any dithering you've previously applied to your image.

File type Select a file type to save your image as.

Weight Specify the color channel that you want to emphasize. This prompts the program to favor colors from a certain color channel (Red, Green, or Blue) when building the color palette.

Filter Select a filter to apply to your image to further reduce its size.

Palette Select the default palette type that you want to use. Select "User defined" to apply a customized palette. Specify a user-defined palette file (*.PAL) in the File name field 	Dither Click to apply dithering to your image. This mixes  the existing colors from the palette in different patterns in order to mimic the missing color.

Interlaced Click if you want the image to load gradually into the Web browser.

Alpha channel Select to save the mask as an actual alpha channel that can be used and modified later.


PNG Image Optimizer dialog box - Palette
  Mask Options	  Background
  PNG Options	  Palette

Colors Displays all the colors in the selected palette.

Save palette Stores your palette file in *.PAL format for later use.

Note: This is only available if you select Indexed Color in the PNG Options tab.


Compress By Size dialog box

Compresses your image to a specific file size.

Original file size Displays the current file size of your image.

Desired file size Enter a file size that you want Image Optimizer to reduce your image file to. Choose from bytes or kilobytes.

Compression ratio Specify the amount of compression that you want by percent.


Performing a batch test

Image Optimizer allows you to try different color and compression settings on your file before you actually save it. This lets you experiment more quickly with the variables that affect these image file formats the most.

To perform a batch test:

1.	Click the Batch button to open the Batch dialog box.

2.	For GIF and PNG, enter the lowest number of colors to test in the Fewest colors entry box. For JPEG, enter a number for Lowest quality.

3.	Enter the highest number of colors to test in the Most colors entry box in the GIF and PNG Batch dialog box and the Highest quality percentage for JPEG.

4.	Select either a specific number of tests to perform, or perform a single test for each increment of 0-20 colors. If you choose to have tests done by Increment, then be aware that entering a smaller number of increments results in more tests.

5.	Click OK. Once the tests have been generated, you can view the results in the Batch Results dialog box that appears. Highlight a particular test image, then click the Select button to put that image into Image Optimizer's main preview window and use its settings to optimize your image.


JPEG Batch dialog box

Lowest quality Enter a value for the lowest quality. A high value means that more compression will be applied to the file. 	Highest quality Enter a value for the highest quality. A higher value means that less compression will be applied to the file, and that the file may require a longer loading time. 	Number of tests Specifies how many tests you want Image Optimizer to perform.	Increment Specifies how many colors will be tested in one trial. The higher the number, the fewer tests Image Optimizer will perform.

  Performing a batch test


GIF Batch dialog box
GIF / PNG Batch dialog box

Fewest colors Enter a value for the fewest colors. A high value means that more compression will be applied to the file. 	Most colors Enter a value for the highest quality. A higher value means that less compression will be applied to the file, and that the file may require a longer loading time. 	Number of tests Specifies how many tests you want Image Optimizer to perform. 	Increment Specifies how many colors will be tested in one trial. The higher the number, the fewer tests Image Optimizer will perform.

  Performing a batch test


JPEG History dialog box
Batch Results dialog box

Once the batch tests have been generated, you can view the results in the Batch Results window.

Total number of tests Specifies the total number of times Image Optimizer has performed a test.

Compression details Displays details of your image after compression, including file size and its attribute settings.